import Taro, { Component, Config } from "@tarojs/taro";
import {inject, observer} from '@tarojs/mobx'
import { View, ScrollView, Image, Text } from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'

import {getRuntime, pageSize, qualificationsTypeArr, subtime} from '../../utils/common'

import './index.less'
import icon_31 from '../../assets/img/icon_31.png'
import icon_32 from '../../assets/img/icon_32.png'


// 工商服务中心-建企资质服务中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Business extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    typeArr: qualificationsTypeArr,
    typeIndex: null, // 全部
    allProvince:[],
    items:[],
    totalCount: 0,
    provinceId: null,
    pageIndex: 1,
    pageSize,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '建企资质服务中心'})
    this.getAllProvince()
    this.getAllQualificationServiceCenterInfo()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getAllProvince() {
    let { AreaStore } = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        })
      }
    })
  }

  getAllQualificationServiceCenterInfo() {
    let { typeIndex,typeArr,pageIndex,pageSize,provinceId, } = this.state
    let { FinancialCenterStore } = this.props.stores
    console.log(typeIndex)
    FinancialCenterStore.getAllQualificationServiceCenterInfo({
      qualificationsType: typeIndex?typeIndex+1:null,
      areaCode: provinceId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({
            totalCount: toJS(res.totalCount),
            items: toJS(res.items)
          })
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({
            totalCount: res.totalCount,
            items
          })
        }
      }
    })
  }
  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllQualificationServiceCenterInfo()
      })
    }
  }

  changeOption(type: string, value?: number) {
    this.setState({
      [type]: value
    }, () => {
      this.getAllQualificationServiceCenterInfo()
      // console.log(this.state.typeIndex)
    })
  }

  getAreaTextByAreaCode(areaCode: number){
    let { allProvince } = this.state
    allProvince.map(item => {
      if(item.value === areaCode){
        return item.label
      } else{
        return areaCode
      }
    })
  }

  render() {
    let { typeIndex,typeArr,allProvince,provinceId,items } = this.state
    return(
     <View className='business-index'>
       <View className='business-theme'>
         <View className='theme' onClick={this.handelRouter.bind(this, '/pages/business/page1?type=7')}>
           <Image src={icon_31} className={'theme-img'} />
          <View className={'theme-info'}>
            <Text className='title'>资质申办</Text>
            <Text className='desc'>帮您轻松办资质</Text>
          </View>
         </View>
         <View className='theme' onClick={this.handelRouter.bind(this, '/pages/business/page1?type=8')}>
           <Image src={icon_32} className={'theme-img'} />
           <View className={'theme-info'}>
             <Text className='title'>资质升级</Text>
             <Text className='desc'>提升竞争力和信誉度</Text>
           </View>
         </View>
       </View>
       <View className='select-option'>
           <View className='option-item'>
             <View className={!typeIndex?'option all option-active':'option all'} onClick={this.changeOption.bind(this,'typeIndex',null)}>全部</View>
             <ScrollView
               className='scrollview'
               scrollX
               scrollWithAnimation
               onScroll={this.onScroll}
             >
               {
                 typeArr.map((item,index) => {
                   return(
                     <View className={typeIndex===index?'option option-active':'option'} key={index} onClick={this.changeOption.bind(this,'typeIndex',index)}>{item}</View>
                   )
                 })
               }
             </ScrollView>
           </View>
         <View className='option-item'>
           <View className={!provinceId?'option all option-active':'option all'} onClick={this.changeOption.bind(this,'provinceId',null)}>全部</View>
           <ScrollView
             className='scrollview'
             scrollX
             scrollWithAnimation
             onScroll={this.onScroll}
           >
             {
               allProvince.map((item) => {
                 return(
                   <View className={provinceId===item.value?'option option-active':'option'} key={item.value} onClick={this.changeOption.bind(this,'provinceId',item.value)}>{item.label}</View>
                 )
               })
             }
           </ScrollView>
         </View>
       </View>

       <View className='interval' />


       <View className='list-03'>
         {items.length>0&&
          items.map(item => {
            return(
              <View className='list-03-item' onClick={this.handelRouter.bind(this, '/pages/business/page3_detail?id='+item.id)}>
                <View className='label'>{item.qualificationsTypeName}</View>
                <View className='r'>
                  <View className='title'>{item.title}</View>
                  <View className='price'>
                    {item.priceInterval}
                    <Text className='small'>万</Text>
                  </View>
                  <View className='info'>
                    <Text className='date'>{subtime(item.creationTime)}</Text>
                    <Text className='date'>{item.contactsArea}</Text>
                  </View>
                </View>
              </View>
            )
          })
         }
         {
           items.length<=0&&<View className='page-none-info'>没有相关信息~</View>
         }
       </View>

      <View className='page-submit' onClick={this.handelRouter.bind(this, '/pages/business/page3_demand')}>我也要发布消息</View>
     </View>
    )
  }
}

export default Business
